<template>
  <div class="indices-forecast">
    <h1 class="title">当天生活指数预报</h1>
    
    <div v-if="indexData" class="indices-container">
      <h4 class="subtitle">{{ location.name }} 生活指数预报 ({{ formatDate }})</h4>
      
      <div class="indices-grid">
        <div v-for="(item, index) in indexData.daily" 
             :key="index" 
             class="index-card"
             :class="{ active: selectedIndex === index }"
             @click="selectedIndex = selectedIndex === index ? null : index">
          <span class="index-name">{{ item.name }}</span>
          <span class="index-category">{{ item.category }}</span>
        </div>
      </div>

      <transition name="slide">
        <div v-if="selectedItem" class="details-section">
          <h4>{{ selectedItem.name }}</h4>
          <p class="category">等级: {{ selectedItem.category }}</p>
          <p class="description">{{ selectedItem.text }}</p>
        </div>
      </transition>
    </div>

    <p v-else class="error-message">{{ error || '正在加载数据...' }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';
import { KEY, API_LIFE } from '@/common/constrant';

export default {
  name: 'IndicesForecast',
  data: () => ({
    // 存储API返回的生活指数数据
    indexData: null,
    // 存储错误信息
    error: null,
    // 当前选中的生活指数卡片索引
    selectedIndex: null,
  }),
  computed: {
    // 从vuex获取位置信息
    ...mapState(['location']),
    // 格式化当前日期为中文格式
    formatDate() {
      return new Date().toLocaleDateString('zh-CN');
    },
    // 获取当前选中的生活指数详细信息
    selectedItem() {
      return this.selectedIndex !== null ? this.indexData.daily[this.selectedIndex] : null;
    }
  },
  methods: {
    // 获取生活指数数据的方法
    async fetchIndices() {
      try {
        // 发起API请求获取生活指数数据
        const response = await axios.get(API_LIFE, {
          params: {
            // 使用id获取位置信息
            location: this.location.id,
            // 获取全部15种生活指数
            type: '0',
            key: KEY,
            lang: 'zh'
          }
        });

        // 如果请求成功，更新数据
        if (response.data.code === '200') {
          this.indexData = response.data;
          this.error = null;
        }
      } catch (err) {
        // 请求失败时的错误处理
        this.error = '数据获取失败，请稍后重试';
        console.error('API error:', err);
      }
    }
  },
  watch: {
    // 监听位置变化，自动重新获取数据
    location: {
      handler: 'fetchIndices',
      // 组件创建时立即执行一次
      immediate: true
    }
  }
};
</script>

<style scoped>
/* 标题样式 */
.title, .subtitle {
  color: rgb(126, 202, 250);
}

/* 主容器样式 */
.indices-forecast {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 内容容器样式 */
.indices-container {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 网格布局，响应式布局 */
.indices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  padding: 20px 0;
}

/* 生活指数卡片基础样式 */
.index-card {
  background: linear-gradient(135deg, #7ed6df, #22a6b3);
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

/* 卡片悬停效果 */
.index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 选中卡片的样式 */
.index-card.active {
  background: linear-gradient(135deg, #7cdde6, #39c5d2);
}

/* 详细信息区域的过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>